<div class="card card-default gutter-b  card-outline">
    <div class="card-header align-items-center border-0">
        <h3 class="card-title align-items-start flex-column marginHalf">
            <span class="font-weight-bolder text-dark" *ngIf="!taxonomyItemData.id && !taxonomyItemData.parentId">
                {{'AddRootDataItem' | localize}}
            </span>
            <span class="font-weight-bolder text-dark" *ngIf="!taxonomyItemData.id && taxonomyItemData.parentId">
                {{'AddSubDataItem' | localize}}：{{ parentDisplayName}}
            </span>
            <span class="font-weight-bolder text-dark" *ngIf="taxonomyItemData.id">
                {{'Edit' | localize}}
            </span>
        </h3>
        <div class="card-tools">
            <button [disabled]="saving" type="button" class="btn btn-default btn-circle mr-1"
                    (click)="close()"><i class="bi bi-x"></i>{{"Cancel" | localize}}</button>
            <button type="submit" class="btn btn-primary btn-circle blue"  (click)="save()"
                    [buttonBusy]="saving" [busyText]="l('SavingWithThreeDot')">
                    <i class="fa fa-save"></i>
                    <span>{{"Save" | localize}}</span>
            </button>
        </div>
    </div>
    <div class="card-body">
        <div class="form-group form-md-line-input form-md-floating-label no-hint">
            <label>{{'DisplayName' | localize}}</label>
            <input class="form-control"  type="text" [ngClass]="{'edited':taxonomyItemData.displayName}"
                   required [(ngModel)]="taxonomyItemData.displayName" name="displayName"
                   maxlength="128">
        </div>
        <div class="form-group form-md-line-input form-md-floating-label no-hint">
            <label>{{'Localization' | localize}}</label>
            <input class="form-control"  type="text" [ngClass]="{'edited':taxonomyItemData.localDisplayName}"
                   required [(ngModel)]="taxonomyItemData.localDisplayName" name="localDisplayName"
                   maxlength="100">
        </div>

        <div class="form-group form-md-line-input form-md-floating-label no-hint">
            <label>{{'Value' | localize}}</label>
            <input class="form-control"  type="text" [ngClass]="{'edited':taxonomyItemData.value}"
                   required [(ngModel)]="taxonomyItemData.value" name="value"
                   maxlength="100">
        </div>

        <div class="form-group form-md-line-input form-md-floating-label no-hint">
            <label>{{'Order' | localize}}</label>
            <input class="form-control"  type="number" [ngClass]="{'edited':taxonomyItemData.norder}"
                   required [(ngModel)]="taxonomyItemData.norder" name="norder"
                   step="1" min="1">
        </div>
        <div class="form-group form-md-line-input form-md-floating-label no-hint">
            <label>URL</label>
            <input class="form-control"  type="text" [ngClass]="{'edited':taxonomyItemData.linkUrl}"
                    [(ngModel)]="taxonomyItemData.linkUrl" name="linkUrl"  maxlength="350" >
        </div>
        

        <div class="row" >
            <div class="col-sm-6">
                <div class="form-group">
                    <label>picture1</label>
                    <input type="file"  id="ImgUpload1"
                           (change)="onPictureInputChange1($event)">
                </div>
            </div>
            <div class="col-sm-6">
                <a (click)="lookOver(taxonomyItemData.pic1)" *ngIf="taxonomyItemData.pic1">
                    <img [attr.src]="getUrl(taxonomyItemData.pic1)" class="bg-gray" style="height:60px;" />
                </a>
            </div>
        </div>
        <div class="row" *ngIf="false" >
            <div class="col-sm-6">
                <div class="form-group">
                    <label>picture2</label>
                    <input type="file"  id="ImgUpload2" (change)="onPictureInputChange2($event)">
                </div>
            </div>
            <div class="col-sm-6">
                <a (click)="lookOver(taxonomyItemData.pic2)" *ngIf="taxonomyItemData.pic2">
                    <img [attr.src]="getUrl(taxonomyItemData.pic2)" class="bg-gray" style="height:60px;" />
                </a>
            </div>
        </div>

        <div class="checkbox-list">
            <div class="form-group">
                <label for="taxItem_isActive" class="checkbox"  style="margin-bottom: 0">
                    <input id="taxItem_isActive" type="checkbox"
                        name="isActive"
                        [(ngModel)]="taxonomyItemData.isActive">
                    <span></span>
                    {{"ReleaseState" | localize}}
                </label>
            </div>
            <div class="form-group">
                <label for="taxItem_isBindItem" class="checkbox" >
                    <input id="taxItem_isBindItem" type="checkbox"
                        name="isBindItem"
                        [(ngModel)]="taxonomyItemData.isBindItem">
                    <span></span>
                    {{"IsBindItem" | localize}}
                </label>
            </div>
        </div>
    </div>
</div>
